<template>
    <div class="cart">
        <div id="separator">Shopping Cart</div>
        <div id="Cart">
            <div id="removeBtnLine"><div id="removeBtn" @click="deleteItems">DELETE</div></div>
            <div id="emptyCart" v-if="itemList.length === 0">Your Cart Is Empty</div>
            <div class="cartItemDiv" v-else v-for="(item, index) of itemList" :key="`item-${index}`">
                <div class="leftFrame">
                    <div class="checkBox"><input type="checkbox" class="checkBoxContent" :value="item.itemId" v-model="checked"></div><!--空白
                    --><div class="itemPicture" :style="{'background-image': `url(http://localhost/${item.picture == null ? 'default.png' : item.picture})`}" @click="viewItem(item)"></div>
                </div><!--空白
                --><div class="rightFrame">
                <div class="title">{{ item.itemId }}</div>
                <div class="subTitle">{{ item.productId }}</div>
                <div class="explain">
                    <p>{{ item.attribute1 }}</p>
                    <p>{{ item.attribute2 }}</p>
                </div>
                <div class="listPrice"><span>￥{{ item.listPrice.toFixed(2) }}</span></div>
                <div class="count">
                    <div class="mulCharacter">&times;</div>
                    <div class="addBtn" @click="handleAdd(item)">+</div>
                    <input type="text" size="3" v-model="item.num" readonly="readonly"/>
                    <div class="subBtn" @click="handleSub(item)">-</div>
                </div>
                <div class="itemTotal"><span>￥{{ getItemTotal(item).toFixed(2) }}</span></div>
                </div>
            </div>
            <div id="totalPrice">
                <div id="subTotal"><span>￥{{ getTotal.toFixed(2) }}</span></div>
                <div id="explain">Sub Total:</div>
            </div>
            <div v-if="itemList.length > 0" @click="checkOut" class="checkOutBtn">Proceed to Checkout&nbsp;&gt;</div>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'

export default {
    data() {
        return {
            itemList: [],
            checked: []
        }
    },
    methods: {
        ...mapActions({
            getItems: 'cart/getItems',
            getItemByItemId: 'item/getItemByItemId',
            getProductByProductId: 'product/getProductByProductId',
            deleteItem: 'cart/deleteItem',
            updateItem: 'cart/updateItem'
        }),
        ...mapMutations({
            setProductId: 'product/setProductId',
            setItemId: 'item/setItemId',
            changeVisible: 'floatWindow/changeVisible',
            changeInnerComponent: 'floatWindow/changeInnerComponent',
            setLineItems: 'order/setLineItems',
            setOrderId: 'order/setOrderId'
        }),
        getItemTotal(item) {
            return item.listPrice * item.num
        },
        handleSub(item) {
            if(item.num > 1) {
                item.num--
                this.updateItem({username: this.account.username, itemId: item.itemId, type: 1}).then((res) => {}, (error) => {})
            }
        },
        handleAdd(item) {
            if(item.num < item.quantity) {
                item.num++
                this.updateItem({username: this.account.username, itemId: item.itemId, type: 0}).then((res) => {}, (error) => {})
            }
        },
        viewItem(item) {
            this.setItemId(item.itemId)
            this.setProductId(item.productId)
            this.changeInnerComponent('FlexItem')
            this.changeVisible()
        },
        checkOut() {
            if(this.isSignIn === false || this.account === null) {
                this.$router.push('/login')
                return
            }
            let orderId = (new Date()).getTime() % 2147483647
            console.log(orderId)
            let lineItems = []
            let lineNumber = 0
            for(let item of this.itemList) {
                lineItems.push({
                    orderId: orderId,
                    lineNumber: lineNumber,
                    quantity: item.num,
                    itemId: item.itemId,
                    unitPrice: item.listPrice
                })
                lineNumber++
            }
            this.setLineItems(lineItems)
            this.setOrderId(orderId)
            this.$router.push(`/checkOut/${orderId}`)
        },
        deleteItems() {
            for(let itemId of this.checked){
                this.deleteItem({username: this.account.username, itemId: itemId}).then((res) => {
                    this.itemList = this.itemList.filter((item) => { return item.itemId !== itemId })
                }, (error) => {})
            }
        }
    },
    computed: {
        ...mapState({
            isSignIn: state => state.account.signIn,
            account: state => state.account.account
        }),
        getTotal() {
            let total = 0
            for(let item of this.itemList) {
                total += this.getItemTotal(item)
            }
            return total
        }
    },
    mounted() {
        if(this.isSignIn === false || this.account === null) {
            this.$router.push('/login')
            return
        }
        this.getItems(this.account.username).then((res) => {
            for(let item of res) {
                this.getItemByItemId(item.itemId).then((res) => {
                    let temp = res
                    this.getProductByProductId(temp.productId).then((res) => {
                        temp.picture = res.picture
                        console.log(res)
                        temp.num = item.num
                        this.itemList.push(temp)
                    }, (error) => {})
                }, (error) => {})
            }
        }, (error) => {
            console.log(error)
        })
    }
}
</script>

<style lang="scss" scoped>
.cartItemDiv
{
    margin: 30px auto;
    width: 90%;
    height: 200px;
    border: transparent;
    border-bottom: 3px solid #833d1e;
    overflow: hidden;
}

#separator
{
    border: none;
    border-bottom: 3px solid #364462;
    text-align: center;
    overflow: hidden;
    width: 25%;
    margin: 35px auto;
    font-size: 2em;
    color: #364462;
}

#Cart
{
    width: 55%;
    margin: 60px auto;
    color: #833d1e;
    border-radius: 3px;
    background-color: #efe7db;
    box-shadow: 2px 2px 15px #78a686;
    padding: 1px;
    overflow: hidden;
    min-height: 300px;
    position: relative;
}

.leftFrame
{
    height: 100%;
    width: 350px;
    float: left;
}

.checkBox input[type="checkbox"]
{
    display: block;
    margin: 0;
    height: 24px;
    width: 24px;
    position: relative;
    padding: 0;
    top: 88px;
    background-color: #efe7db;
}

.leftFrame .itemPicture
{
    position: relative;
    top: 14px;
    left: 10px;
    width: 300px;
    height: 169px;
    background-size: cover;
    float: left;
    cursor: pointer;
}

.leftFrame .checkBox
{
    height: 100%;
    float: left;
}

.rightFrame
{
    position: relative;
    width: calc(100% - 350px);
    float: left;
    height: 100%;
}

.cartItemDiv .title
{
    margin-top: 5px;
    font-size: 2em;
    font-weight: normal;
    width: 100%;
}

.cartItemDiv .subTitle, .cartItemDiv .explain
{
    margin-top: 5px;
    font-size: 1.1em;
    width: 100%;
}

.listPrice
{
    float: left;
    height: 31px;
    width: 100px;
    line-height: 31px;
    font-size: 1.3em;
    margin-top: 10px;
}

.itemTotal
{
    position: absolute;
    font-size: 1.7em;
    right: 10px;
    bottom: 4px;
}

.count
{
    float: left;
    margin-top: 10px;
}

.count input
{
    outline: none;
    background: transparent;
    color: #833d1e;
    font-size: 1.2em;
    height: 25px;
    width: 50px;
    border: transparent;
    border-bottom: 3px solid #833d1e;
    border-top: 3px solid #833d1e;
    display: block;
    float: left;
    text-align: right;
    padding: 0 5px 0 0;
}

.count .mulCharacter
{
    float: left;
    height: 31px;
    width: 21px;
    text-align: center;
    line-height: 31px;
    font-size: 1.5em;
    font-weight: normal;
}

.addBtn, .subBtn
{
    float: left;
    height: 25px;
    width: 25px;
    border: 3px solid #833d1e;
    font-size: 1.3em;
    text-align: center;
    line-height: 25px;
    font-weight: bolder;
    color: #833d1e;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    user-select: none;
}

.addBtn
{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.subBtn
{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.addBtn:hover, .subBtn:hover
{
    color: #efe7db;
    background-color: #833d1e;
}

#totalPrice
{
    font-size: 2em;
    font-weight: bold;
    overflow: hidden;
    position: relative;
    margin: 10px 0;
}

#totalPrice #explain
{
    float: right;
    margin-right: 15px;
}

#totalPrice #subTotal
{
    margin-left: 10px;
    float: right;
    margin-right: 5%;
}

#removeBtnLine
{
    width: 100%;
    height: 50px;
    overflow: hidden;
    position: relative;
    margin-top: 2%;
}

#removeBtn
{
    position: absolute;
    right: 5%;
    width: 10%;
    text-align: center;
    height: 40px;
    border: 3px solid #833d1e;
    font-size: 1.1em;
    border-radius: 5px;
    line-height: 40px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

#removeBtn:hover
{
    color: #efe7db;
    background-color: #833d1e;
    user-select: none;
}

.checkOutBtn
{
    width: 25%;
    margin: 40px auto;
    text-align: center;
    height: 40px;
    border: 3px solid #833d1e;
    font-size: 1.1em;
    border-radius: 5px;
    line-height: 40px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.checkOutBtn:hover
{
    color: #efe7db;
    background-color: #833d1e;
    user-select: none;
}

#emptyCart
{
    width: 100%;
    height: 400px;
    text-align: center;
    line-height: 400px;
    font-size: 2em;
}
</style>
